<template>
	<view class="content bg-drak ft-main">
		<view class="gap"></view>
		<view class="row dflex border-line padding-lr">
			<text class="tit">收货人</text>
			<input class="input" type="text" v-model="addrData.nickName" placeholder="请输入收货人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row dflex border-line padding-lr">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addrData.mobile" placeholder="请输入手机号码"
				placeholder-class="placeholder" />
		</view>

		<view class="row dflex border-line padding-left">
			<text class="tit">所在地区</text>
			<view class="dflex-b flex1">
				<view class="flex1 input_t" @click="openaddress">{{ addressName }}</view>
				<use-address ref="useaddress" @onConfirm="changeAddr" cancelColor="#bbb" themeColor="#FF6A6C">
				</use-address>
			</view>
		</view>
		<view class="row dflex border-line padding-lr">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addrData.address" placeholder="请输入详细地址"
				placeholder-class="placeholder" />
		</view>
		<view class="gap"></view>
		<view class="row dflex-b padding-lr">
			<text class="tit">设为默认</text>
			<switch :checked="addrDefault" color="#FF6A6C" @change="switchChange" />
		</view>

		<view class="padding w-full margin-top">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	const __name = 'usemall-member-address';
	import {
		mapState
	} from 'vuex';

	import {
		createAddressApi,
		updateAddressApi,
		setdefaultAddressApi,
	} from "@/api/user.js"

	export default {
		computed: {
			...mapState(['member'])
		},
		components: {},
		data() {
			return {
				addrDefault: 0,
				addressName: '请选择地址',
				addrData: {
					nickName: '',
					mobile: '',
					provincial: '',
					city: '',
					address: '',
					is_default: 0,
					uid: '',

				},
			
				id: 0,
				type: 'add',
			};
		},
		onLoad(options) {
			let title = '新增收货人';
			this.addrData.uid = this.member.id
			if (options.type === 'edit') {
				title = '编辑收货人';
				this.id = options.id;
				this.addrData = JSON.parse(options.options);
				console.debug(this.addrData, "this.addrData编辑<====================addrData")
				if (this.id) {
					this.addrDefault = this.addrData.is_default == 1;
					this.addressName = this.addrData.provincial + '-' + this.addrData.city
				}
			} else {
				// #ifdef H5 || MP-360 || MP-QQ || MP-TOUTIAO
				this.addressName = "请选择地址";
				// #endif
			}
			this.type = options.type || 'add';
			uni.setNavigationBarTitle({
				title
			});
		},

		methods: {
			switchChange(e) {
				this.addrDefault = e.detail.value;
			},
			openaddress() {
				this.$refs.useaddress.open();
			},
			// 选择地址
			changeAddr(res) {
				let _this = this;
				console.debug(res.labelArr, "选择地址labelArr")
				_this.addrData.provincial = res.labelArr[0] || '';
				_this.addrData.city = (res.labelArr[1] + res.labelArr[2]) || '';
				// _this.addrData.area_name = res.labelArr[2] || '';
				console.debug(_this.addrData.provincial, "选择地址_this.addrData.provincial")
				console.debug(_this.addrData.city, "选择地址_this.addrData.city")
				// _this.addrData.address = res.label;
				// _this.addressName = _this.addrData.address;
				_this.addressName = res.label;
			},
			
			//提交
			async submit() {
				console.debug(this, "《=====================submit地址数据")
				console.debug(this.addrData, "《=====================submit==addrData地址数据")
				if (this.addrDefault) {
					//是默认地址
					this.addrData.is_default = 1;
					this.setDefaultaddr();
				} else {
					//不是默认地址
					this.addrData.is_default = 0;
				}

				let data = this.addrData;
				if (!data.nickName) {
					this.$api.msg('请填写收货人');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}

				if (!data.address) {
					this.$api.msg('请选择地址');
					return;
				}
				if (!data.address) {
					this.$api.msg('请填写详细地址');
					return;
				}
				//新增用户地址
				if (this.type == 'add') {
					const response = await createAddressApi(data).catch(() => {});
					if (response?.code === 200) {
						this.$api.msg('新增成功');
						uni.navigateBack();
						return;
					} else {
						this.$api.msg('新增失败');
					}
				} else {
					if (!this.id) {
						this.$api.msg('当前ID异常，编辑失败');
						return;
					}
					//修改用户地址
					const response = await updateAddressApi(data).catch(() => {});
					if (response?.code === 200) {
						this.$api.msg({
							title: "提示",
							message: "编辑成功"
						});
						uni.navigateBack();
					}
				}
			},

			// 设置默认地址
			async setDefaultaddr(options) {
				const response = await setdefaultAddressApi({
					uid: this?.member?.id,
					aid: this?.addrData?.id,
				}).catch(() => {})
				if (response?.code === 200) {}

			},

		},
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.row {
		background: #fff;
		position: relative;
		height: 110rpx;

		.tit {
			flex-shrink: 0;
			width: 150rpx;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			padding-left: 0;
		}

		.input_t {
			color: #333;
		}
	}
</style>